{% extends 'dashboard/base.html' %}
{% load static %}

{% block title %}积分记录管理 - 后台管理{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">积分记录管理</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{% url 'dashboard:points_management' %}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> 返回积分管理
        </a>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <h6 class="card-title">总记录数</h6>
                <h3>{{ total_records }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <h6 class="card-title">总获得积分</h6>
                <h3>{{ total_points_added }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <h6 class="card-title">总使用积分</h6>
                <h3>{{ total_points_used }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-info text-white">
            <div class="card-body">
                <h6 class="card-title">积分类型</h6>
                <h3>{{ points_type_stats|length }}</h3>
            </div>
        </div>
    </div>
</div>

<!-- 搜索和筛选 -->
<div class="card shadow mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-4">
                <input type="text" name="search" class="form-control" placeholder="搜索用户名、描述..." value="{{ search_query }}">
            </div>
            <div class="col-md-3">
                <select name="type" class="form-select">
                    <option value="">所有类型</option>
                    <option value="activity_create" {% if type_filter == 'activity_create' %}selected{% endif %}>创建活动</option>
                    <option value="activity_join" {% if type_filter == 'activity_join' %}selected{% endif %}>参加活动</option>
                    <option value="activity_checkin" {% if type_filter == 'activity_checkin' %}selected{% endif %}>活动签到</option>
                    <option value="comment" {% if type_filter == 'comment' %}selected{% endif %}>发表评论</option>
                    <option value="rating" {% if type_filter == 'rating' %}selected{% endif %}>评分活动</option>
                    <option value="exchange" {% if type_filter == 'exchange' %}selected{% endif %}>积分兑换</option>
                    <option value="admin_adjust" {% if type_filter == 'admin_adjust' %}selected{% endif %}>管理员调整</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" name="date_from" class="form-control" placeholder="开始日期" value="{{ date_from }}">
            </div>
            <div class="col-md-2">
                <input type="date" name="date_to" class="form-control" placeholder="结束日期" value="{{ date_to }}">
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 积分记录列表 -->
<div class="card shadow">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>用户</th>
                        <th>积分变动</th>
                        <th>类型</th>
                        <th>描述</th>
                        <th>时间</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in points_records %}
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <img src="{{ record.user.get_avatar_url }}" alt="{{ record.user.username }}" 
                                     class="rounded-circle me-2" width="32" height="32">
                                <div>
                                    <strong>{{ record.user.nickname|default:record.user.username }}</strong>
                                    <br>
                                    <small class="text-muted">@{{ record.user.username }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            {% if record.points > 0 %}
                            <span class="badge bg-success">+{{ record.points }}</span>
                            {% else %}
                            <span class="badge bg-danger">{{ record.points }}</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="badge bg-secondary">{{ record.get_type_display }}</span>
                        </td>
                        <td title="{{ record.description }}">
                            {{ record.description|truncatechars:50 }}
                        </td>
                        <td>{{ record.created_at|date:"Y-m-d H:i" }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center py-4">
                            <i class="bi bi-list-check text-muted display-4"></i>
                            <p class="text-muted mt-2">暂无积分记录</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 积分类型统计 -->
<div class="card shadow mt-4">
    <div class="card-header">
        <h6 class="m-0 font-weight-bold text-primary">
            <i class="bi bi-pie-chart me-2"></i>积分类型分布
        </h6>
    </div>
    <div class="card-body">
        <div class="row">
            {% for stat in points_type_stats %}
            <div class="col-md-3 mb-3">
                <div class="card">
                    <div class="card-body text-center">
                        <h6 class="card-title">{{ stat.type }}</h6>
                        <h4 class="text-primary">{{ stat.count }}</h4>
                        <small class="text-muted">{{ stat.total_points }} 积分</small>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}